<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>layout</title>
  <link rel="stylesheet" href="./layout.css">
</head>
<body>
<div class="layout-root">
  <div class="layout layout-left"></div>
  <div class="divider divider-vertical">
    <div class="divider-cursor"></div>
  </div>
  <div class="layout layout-right"></div>
</div>

<script>
  let width;
  let status = false;

  const $divider = document.querySelector('.divider');
  const $left = document.querySelector('.layout-left');
  const $right = document.querySelector('.layout-right');
  const $root = document.querySelector('.layout-root');

  function throttle(func, limit) {
    let inThrottle; // 开关
    return (...arg) => {
      if (!inThrottle) {
        func.apply(this, arg);
        // 定时器用来进行保证在一定时间内开关的状态
        inThrottle = setTimeout(() => {
          inThrottle = false;
        }, limit);

      }
    };
  }

  const __mousemove = throttle(function mousemove(event) {
    const { clientX, buttons } = event;

    // 确保是鼠标左键被按下拖动
    if (buttons === 1 && status) {
      $left.style.width = clientX + 'px';
      $right.style.width = width - clientX + 'px';
    }
  }, 24);

  document.addEventListener('mousemove', __mousemove, false);

  function onMouseStart () {
    console.log('start', [document]);
    status = true;
    $root.style.cursor = $left.style.cursor = $right.style.cursor = 'col-resize';
  }

  function onMouseEnd () {
    console.log('end');
    status = false;
    $root.style.cursor = $left.style.cursor = $right.style.cursor = 'default';
  }

  $divider.addEventListener('mousedown', onMouseStart, false);

  $divider.addEventListener('mouseup', onMouseEnd, false);
  document.addEventListener('mouseup', onMouseEnd, false);

  window.addEventListener('load', function () {
    const { innerHeight, innerWidth } = window;

    width = innerWidth;

    $left.style.width = innerWidth - 200 + 'px';
    $right.style.width = 198 + 'px';
  }, false)




</script>
</body>
</html>
